<template>
  <div class="license-container">
    <!-- 遮罩层 start -->
    <div v-if="show_mask" class="mask" @click="go_to_gift">
      <img src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/default/20250310/d0b1f30e9f20d86ef57e7383dec32e75.png" alt="广告" class="mask-image" />
    </div>
    <!-- 遮罩层 end -->
    <!-- 营业执照 start -->
    <div class="card">
      <img src="" alt="营业执照" class="image-placeholder" />
      <p>营业执照</p>
    </div>
    <!-- 营业执照 end -->
    <!-- 食品经营许可证 start -->
    <div class="card">
      <img src="" alt="食品经营许可证" class="image-placeholder" />
      <p>食品经营许可证</p>
    </div>
    <!-- 食品经营许可证 end -->
  </div>
</template>

<script setup>
import { ref } from 'vue';

const show_mask = ref(true);

function go_to_gift() {
  show_mask.value = false;
  // 跳转到指定页面
  uni.navigateTo({
    url: '/pages/tuangou/gift'
  });
}
</script>

<style lang="less">
.license-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.mask-image {
  width: 80%;
  height: auto;
  border-radius: 10px;
}

.card {
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 10px;
  text-align: center;
}

.image-placeholder {
  width: 100%;
  height: auto;
  background-color: #f0f0f0;
}
</style>
